<template>
	<div class="home-new">
		<HomePanel title="新鲜好物" subTitle="新鲜出炉 品质靠谱">
			<template #right>
				<XtxMore path="/"></XtxMore>
			</template>
		</HomePanel>
		<div ref="target" style="position: relative;height: 406px;">
			<Transition name="fade">
				<ul v-if="goods.length" class="goods-list">
					<li v-for="item in goods" :key="item.id">
						<router-link :to="`/product/${item.id}`">
							<img :src="item.picture">
							<p class="name ellipsis">{{item.name}}</p>
							<p class="price">&yen;{{item.price}}</p>
						</router-link>
					</li>
				</ul>
				<HomeSkeleton bg="#f0f9f4" v-else></HomeSkeleton>
			</Transition>
		</div>
	</div>
</template>

<script>
	import {
		ref
	} from 'vue'
	import HomePanel from './home-panel.vue'
	import HomeSkeleton from './home-skeleton'
	import {
		useLazyData
	} from '@/hooks'
	import {
		findNew
	} from '@/api/home'

	export default {
		components: {
			HomePanel,
			HomeSkeleton
		},

		setup() {
			const goods = ref([])
			const {
				target,
				result
			} = useLazyData(findNew)

			return {
				goods: result,
				target
			}
		}
	}
</script>

<style scoped lang="less">
	.goods-list {
		display: flex;
		justify-content: space-between;
		height: 406px;

		li {
			width: 306px;
			height: 406px;
			background: #f0f9f4;
			.hoverShadow();

			img {
				width: 306px;
				height: 306px;
			}

			p {
				font-size: 22px;
				padding: 12px 30px 0 30px;
				text-align: center;
			}

			.price {
				color: @priceColor;
			}
		}
	}
</style>
